<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<!--搜索条件-->
			<el-form :inline="true" :model="screen" class="demo-form-inline">
				<el-form-item style="width: 150px;">
					<el-select v-model="screen.status" placeholder="请选择">
						<el-option label="全部状态" value=""></el-option>
						<el-option label="待取机" value="0"></el-option>
						<el-option label="已取机" value="1"></el-option>
						<el-option label="取消" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="width: 150px;">
					<el-select v-model="screen.type" placeholder="请选择">
						<el-option label="顾客手机" value="1"></el-option>
						<el-option label="顾客姓名" value="2"></el-option>
						<el-option label="导购姓名" value="3"></el-option>
					</el-select>
				</el-form-item>
                <el-form-item>
					<el-input v-model="screen.keyword" placeholder="请输入名称关键词"></el-input>
				</el-form-item>
                <el-form-item label="时间">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="screen.startTime" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align: center;">-</el-col>
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="screen.endTime" style="width: 100%;"></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">
						<i class="el-icon-search"></i> 查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onExport">
						<i class="el-icon-download"></i> 导出数据</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!--数据列表-->
		<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" stripe style="width: 100%">
			<el-table-column prop="firstRegion" label="一级区域" width="150">
			</el-table-column>
			<el-table-column prop="secondRegion" label="二级区域" width="150">
			</el-table-column>
			<el-table-column prop="store" label="门店名称" width="150">
			</el-table-column>
			<el-table-column prop="phoneType" label="机型" width="150">
			</el-table-column>
			<el-table-column prop="username" label="顾客姓名" width="150">
			</el-table-column>
			<el-table-column prop="mobile" label="顾客手机号" width="150">
			</el-table-column>
			<el-table-column prop="identification" label="顾客身份证号" width="150">
			</el-table-column>
			<el-table-column label="预订时间" width="150">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="150">
				<template slot-scope="scope">
                    <el-tag size="danger" v-if="scope.row.status == 0">待取机</el-tag>
					<el-popover trigger="hover" placement="left" v-else-if="scope.row.status == 1">
						<p>取机时间：</p>
						<p>{{ scope.row.createTime }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">已取机</el-tag>
						</div>
					</el-popover>
                    <el-tag size="info" v-else-if="scope.row.status == 2">已取消</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="guide" label="导购姓名" width="150">
			</el-table-column>
			<el-table-column prop="guideMobile" label="导购手机号" width="150">
			</el-table-column>
			<el-table-column prop="imei" label="IMEI号" width="150">
			</el-table-column>
			<el-table-column label="操作" min-width="150">
				<template slot-scope="scope">
					<el-button size="mini" plain type="danger" icon="el-icon-delete" @click="regionDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

        <div class="pagination-container" style="text-align: center; margin-top: 30px;">
			<el-pagination :current-page="page.offset" :total="page.total" layout="prev, pager, next" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'complexTable',
		data() {
			return {
                listLoading: true,
				screen: {
					status: '',
					type: '1',
					keyword: '',
					startTime: '',
					endTime: ''
				},
				page: {
					pageSize: 10,
					offset: 1,
					total: null
				},
				list: null
			}
		},
		methods: {
			onSubmit() {
                this.page.offset = 1
				this.fetchData()
            },
            onExport() {
                this.checkExport().then((res) => {
                    this.Export()
                })
            },
            checkExport() {
                return new Promise((resolve, reject) => {
					let data = {
						startTime: this.screen.startTime,
						endTime: this.screen.endTime
					}
					this.listLoading = true
					this.$axios({
						url: '/reservephone/admin/Orders/checkExportData.json',
						method: 'post',
						data: this.$qs.stringify(data)
					}).then((res) => {
						this.listLoading = false
						if (res.status === true || res.status === 'true') {
                            resolve(res)
                        }
					}).catch((err) => {
						this.listLoading = false
						reject(err)
					})
				})
            },
            Export(option) {
                let data = {
                    status: this.screen.status,
                    type: this.screen.type,
                    keyword: this.screen.keyword,
                    startTime: this.screen.startTime,
                    endTime: this.screen.endTime
                }

                data = this.$qs.stringify(data)

                let url = '/reservephone/admin/Orders/exportOrders.htm?' + data
                location.href = url
            },
            handleCurrentChange(val) { //分页
				this.page.offset = val
				this.fetchData()
			},
            regionDelete(id) {
                this.$confirm('确认删除操作？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.regionDeleteConfirm(id)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
            },
            regionDeleteConfirm(id) { //确认删除
                const data = {
					id: id
				}
				this.listLoading = true
				this.$axios({
					url: '/reservephone/admin/Orders/deleteOrder.json',
					method: 'post',
					data: this.$qs.stringify(data)
				}).then((res) => {
					this.listLoading = false
					this.fetchData()
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						duration: 2000
					})
				}).catch(() => {
					this.listLoading = false
				})
            },
            fetchData(option) { // 请求表格数据接口
                return new Promise((resolve, reject) => {
                    let page = {
						offset: this.page.offset,
						pageSize: this.page.pageSize
					}
					let data = Object.assign({}, page, this.screen)

                    if (typeof option === 'object') {
                        data = Object.assign({}, data, option)
                    }
                    this.listLoading = true
                    this.$axios({
                        url: '/reservephone/admin/Orders/index.json',
                        method: 'post',
                        data: this.$qs.stringify(data)
                    }).then((res) => {
                        this.listLoading = false

                        if (res.status === true || res.status === 'true') {
                            this.list = res.data.rows
                            this.page.total = res.data.total
                            resolve(res)
                        }
                    }).catch(() => {
                        this.listLoading = false
                        reject(err)
                    })
                })
			}
		},
		created() {
			this.fetchData()
		}
	}

</script>
